<!DOCTYPE html>
<html>
    <head>
        <title>Vue实例</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    </head>
    <style>
        .message{
            color: aquamarine;
        }
        .bigFont{
            font-size: 32px;
        }
    </style>
    <body>

        <div id="myVue">
            <div>{{d}}</div>
        </div>

        <div id="App">
            <button-counter></button-counter>
            <blog-post title="My journey with Vue" content="ajfa"></blog-post>
            <div>
                <p ref="p" @click="changetodos">Original message:"{{message}}"</p>
                <p @click="changetodos">Original message1:"{{message}}"</p>
                <p>computed reversed message:"{{reversedMessage}}"</p>
                <p>computed reversed message in methods:"{{reversedMessage1(2)}}"</p>
                <div :class="{message:true,bigFont:active == index}" v-for="todo,index in todos" @click="clickTodp($event,index,todo)">{{todo.text}}</div>
                <form action="http://www.baidu.com" v-on:submit.prevent="onSubmit">
                    <input v-on:keyup="changename" name="name" placeholder="请输入名称"/>
                    <input type="submit" value="提交">
                </form>
                <!-- <button v-bind:disable = "isBUttnDisabled">Button</button> -->
                <!-- 简写方式 -->
                <button :disable = "isBUttnDisabled">Button</button>
                <div v-html="html"></div>
            </div>
        </div>
        <div id="app">
            <span :title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息！
            </span>
            <p v-if="seen">现在你看到我了</p>
            <div>
                <div v-for="item,index in todos">
                    {{item.text}} {{index}}
                </div>
            </div>
            <button @click="reverseMessage">反转消息</button>
            <div>{{message}}</div>
            <input v-model="message" />
        </div>
    </body>
</html>
<script>

    let el =document.getElementById('myVue')
    let elHTML = el.innerHTML
    var data = {
        a:1,//a数据属性
        _d:1,//私有属性
        get d(){
            return this._d
        },
        set d(newd){//更新
            this._d=newd
            created()
        }
    }
    data.b = 2
    Object.defineProperty(data,'c',{
        value:3,
        writable:true,//可写
        // writable:false//不可写
        enumerable:false,

    })
    data.c=4
    for(var key in data){
        console.log(key,data[key])
    }
    console.log(data,data.c)
    function created(){
        el.innerHTML = elHTML.replace('{{d}}',data.d)
    }
    created()
   setInterval (function(){
       data.d ++
   },1000)
//自定义组件示例
   Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Vue.component('blog-post', {
  props: ['title','content'],
  data:function(){
      return{
          title1:'5658'
      }
  },
  template: '<div><h3>{{ title }} {{title1}}</h3><div v-html="content"></div> </div>' 
})

    var app = new Vue({
        el:'#App',
        data:{
            isBUttnDisabled:'ture',
            html:'<b style="color:#ff0000;">hello</b> vue',
            message:'Hello',
            active:0,
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        
        },
        created(){
            this.$nextTick(()=>{
                console.log('created',this.$refs,this.$refs.p)
            })

        },
        mounted(){            
            console.log(this.$refs,this.$refs.p)

        },
        computed:{
            reversedMessage(){
                return this.message.split('').reverse().join('')
            }
        },
        methods:{
            changetodos(){
            //点击重置todos
                let todos = [
                { text: '1' },
                { text: '2' },
                { text: '3' }
            ]
            this.todos= todos
                // this.todos.push({text:'sizc'})//点击todos添加sizc
            },
            onSubmit(event){
                console.log(event)
            },
            changename(event){
                console.log(event)
            },
            reversedMessage1(num){
                return this.message.split('').reverse().join('')+num
            },
            clickTodp(event,index,todo){
                console.log(event,index,todo)
            }
        },

    })
    var app = new Vue({
        el: '#app',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString(),
            seen: true,
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        },
        methods:{
            reverseMessage:function(){
                console.log(this)
                this.message = this.message.split('').reverse().join('')
            }
        }
})
</script>